<template>
  <!-- 用于居中及限制宽度等 -->
  <div class="login-page">
    <!-- 登录内容 -->
    <el-card class="login-card">
      <!-- 实现“账号登录”和“验证码登录”切换 -->
      <el-tabs v-model="activeTab"
               class="login-tabs">
        <el-tab-pane label="账号登录"
                     name="account">
          <!-- 账号登录 -->
          <el-form :model="loginForm"
                   class="login-form">
            <el-form-item>
              <!-- 账号输入框 -->
              <el-input v-model="loginForm.account"
                        placeholder="输入账号"
                        prefix-icon="el-icon-user"></el-input>

            </el-form-item>
            <el-form-item>
              <!-- 密码输入框 -->
              <el-input v-model="loginForm.password"
                        type="password"
                        placeholder="输入密码"
                        prefix-icon="el-icon-lock"></el-input>
            </el-form-item>

            <el-form-item class="form-actions">
              <el-link type="primary"
                       @click="handleForgot('password')">忘记密码</el-link>
              <b> | </b>
              <el-link type="primary"
                       @click="handleForgot('account')">忘记账号</el-link>
            </el-form-item>
            <el-form-item>
              <!-- 协议勾选 -->
              <el-checkbox v-model="agreeProtocol">
                我已阅读并同意《外卖商家隐私协议》
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <!-- 登录按钮 -->
              <div style="display: flex; justify-content: center; ">
                <el-button type="primary"
                           round
                           block
                           @click="handleLogin"
                           :disabled="!agreeProtocol"
                           style="width: 300px;">
                  登录
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="验证码登录"
                     name="sms">

          <!-- 验证码登录 -->
          <el-form :model="smsForm"
                   class="login-form">
            <el-form-item>
              <el-input v-model="smsForm.mobile"
                        placeholder="输入手机号"
                        prefix-icon="el-icon-phone"></el-input>
            </el-form-item>
            
            <!-- 验证码输入和图片区域 -->
            <el-form-item>
              <el-input v-model="smsForm.code"
                        placeholder="输入验证码"
                        prefix-icon="el-icon-message">

                <template #append>
                  <el-button size="mini"
                             type="primary">获取验证码</el-button>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-checkbox v-model="agreeProtocol">
                我已阅读并同意《外卖商家版隐私协议》
              </el-checkbox>
            </el-form-item>
            <el-form-item>
              <div style="display: flex; justify-content: center;">
                <el-button type="primary"
                           round
                           block
                           @click="handleSmsLogin"
                           :disabled="!agreeProtocol"
                           style="width: 300px;">
                  登录
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 注册引导 -->
      <div class="register-link">

        <el-link type="danger"
                 @click="handleRegister">注册账号，免费入驻</el-link>
      </div>
    </el-card>
  </div>
</template>

<script>

import { login } from '@/api/login';
import { setToken } from '@/util/cookie';

export default {
  name: 'LoginPage',
  data () {
    return {
      // 用于切换标签页，和 el-tabs 的 v-model 绑定
      activeTab: 'account',
      // 账号登录表单数据
      loginForm: {
        account: null,
        password: null
      },
      // 验证码登录表单数据
      smsForm: {
        mobile: null,
        code: null
      },
      // 是否同意协议
      agreeProtocol: false,
    }
  },
//   created() {
//     // 页面加载时获取验证码
//     this.refreshCaptcha();
//   },
  methods: {

    //判断用户选择哪种登录方式
    submitLogin(){
      if(this.activeTab === 'account'){
        this.handleLogin();
      }else if(this.activeTab === 'sms'){
        this.handleSmsLogin();
      }
    },

  // 账号登录
handleLogin() {
  const loginBody = {
    username: this.loginForm.account,
    password: this.loginForm.password
  }

  login(loginBody).then(res => {
    console.log(res);
    
    if(res.code == 200){
      this.$message.success("登录成功！")
      setToken(res.data.access_token);
      
      // 获取用户信息
      this.$store.dispatch('user/getUserInfo').then(() => {
        // 获取店铺信息并存入Vuex
        this.$store.dispatch('user/getAndStoreShopInfo').then(() => {
          this.$router.push('/index')
        }).catch(error => {
          console.error('获取店铺信息失败:', error);
          this.$router.push('/index'); // 即使获取店铺信息失败也跳转
        });
      }).catch(error => {
        console.error('获取用户信息失败:', error);
        this.$message.error('获取用户信息失败');
      });
    }
  }).catch(error => {
    console.error('登录失败:', error);
    this.$message.error('登录失败');
  });
},
    // 验证码登录
    handleSmsLogin () {
      console.log('验证码登录信息：', this.smsForm);

    },

    handleForgot (type) {
      console.log(`忘记${type}，可跳转找回页面或弹窗`);
    },
    
    // 处理注册
    handleRegister () {
      console.log('前往注册流程');
    },
    
    // 刷新验证码
    // async refreshCaptcha() {
    //   try {
        
    //     const response = await http.get('/captcha');
        
        
    //     this.captchaImageUrl = response.data.imageUrl;
    //     this.captchaToken = response.data.token;
    //   } catch (error) {
    //     console.error('获取验证码失败：', error);
    //     this.$message.error('获取验证码失败，请重试');
    //   }
    // }
  }
}
</script>

<style scoped>
/* 登录区域样式*/
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 卡片样式 */
.login-card {
  width: 400px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
/* 标签页样式，可微调 */
.login-tabs {
  margin-bottom: 20px;
}

/* 表单间距 */
.login-form {
  margin-top: 20px;
}

/* 忘记密码等样式 */
.form-actions {
  display: flex;
  justify-content: flex-end;
}

/* 注册样式 */
.register-link {
  text-align: center;
  margin-top: 16px;
  color: #666;
}

/* 验证码相关样式 */
.captcha-container {
  display: flex;
  align-items: center;
  height: 40px;
}

.captcha-image {
  height: 100%;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 8px;
}

.refresh-btn {
  white-space: nowrap;
}
</style>
